<template>
	<div class="tabBatRoot">
		<div class="ctx">
			<div @click="nav(k)" v-for="(item,k) in d" :key="k" :class="k==i ? 'select':''">
				<div class="tabBar">{{ item.icon }}</div>
				<div class="text">{{ item.text }}</div>
			</div>
		</div>
	</div>
</template>

<script>

export default {
	name: 'WorkspaceJsonTabBar',

	data() {
		return {
			d:[{
				icon:"\uf13c",
				text:"首页",
				url:'/pages/index/index'
			},{
				icon:"\uf13a",
				text:"购物车",
				url:'/pages/shop/shop'
			},{
				icon:"\uf14a",
				text:"订单",
				url:'/pages/order/order'
			},{
				icon:"\uf13d",
				text:"我的",
				url:'/pages/me/me'
			}]
		};
	},

	mounted() {
	},
	props:{
		h:{
			default:75
		},
		w:{
			default:'100%'
		},
		i:{
			default:0
		}
	},
	methods: {
		nav(k){
			this.$emit('checkTab', k);
		}
	},
};
</script>

<style lang="scss" scoped>
.ctx{
	height: 60px;
	box-sizing: border-box;
	padding-top: 5px;
	display: flex;
	justify-content :space-around;
	text-align: center;
	>div{
		width: 20%;
	}
	.text{
		margin-top: 5px;
		font-size: 13px;
		margin-bottom: 7px;
	}
}
.select{
	color: $uni-color-primary;
}
@font-face {
	font-family: 'tabBar';
	src: url('@/static/iconfont/iconfont.ttf?t=1681042682093') format('truetype');
}


.tabBar {
	font-family: "tabBar" !important;
	font-size: 25px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
</style>


